<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>

<div id="app">

    <!--<a href="#/login">登录</a>-->
    <!--<a href="#/register">注册</a>-->
    <!--默认渲染为a标签  也可设置为span标签-->
    <!--tag设置标签-->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!--路由容器占位符-->
    <router-view></router-view>

<script>
var login={
  template:"<h1>登录组件</h1>"
}
var register={
  template:"<h1>注册组件</h1>"
}
// Vue.component("login",{
//   template:"<h1>登录组件</h1> "
// })
var routerObj = new VueRouter({
  //route    //表示路由匹配规则
  routes:[//每个路由规则都是一个对象，对象身上有两个必备属性
      //path表示监听哪个路由链接地址
      //component 展示属性对应的组件
    // {path:"/",component:login},  //可展示默认组件  但是不推荐
    {path:"/",redirect:"/login"},  //重定向  可展示默认组件
    {path:"/login",component:login},
    {path:"/register",component:register}
  ]
})
var vm=new Vue({
  el:"#app",
  data:{},
  methods:{},
  router:routerObj
})

</script>

</body>
</html>